<template>
	<view class="order-container">
		<view class="status-card">
			<uni-icons type="wallet" size="60" color="#4A90E2"></uni-icons>
			<view class="status-text">待支付</view>
			<view class="amount">￥{{ total }}</view>
		</view>

		<view class="detail-card">
			<view class="section-title">费用明细</view>
			<view class="detail-item" v-for="(item,idx) in details" :key="idx">
				<text class="item-label">{{ item.label }}</text>
				<text class="item-value">{{ item.value }}</text>
			</view>
		</view>

		<view class="payment-card">
			<view class="section-title">支付方式</view>
			<view class="payment-method" @click="selectPayment('wechat')">
				<uni-icons type="weixin" size="30" color="#1BD66C"></uni-icons>
				<text class="method-name">微信支付</text>
				<uni-icons 
					:type="paymentMethod === 'wechat' ? 'checkbox-filled' : 'circle'"
					:color="paymentMethod === 'wechat' ? '#4A90E2' : '#999'">
				</uni-icons>
			</view>
			<view class="payment-method" @click="selectPayment('alipay')">
				<image src="/static/alipay.png" class="method-icon"/>
				<text class="method-name">支付宝支付</text>
				<uni-icons 
					:type="paymentMethod === 'alipay' ? 'checkbox-filled' : 'circle'"
					:color="paymentMethod === 'alipay' ? '#4A90E2' : '#999'">
				</uni-icons>
			</view>
			<button class="pay-button" @click="handlePayment">立即支付</button>
		</view>
	</view>
</template>

<script>
	import { request } from '@/util/request.js'

	export default {
		data() {
			return {
				total: 168.00,
				webviewStyles: {
					progress: {
						color: '#4CD964'
					}
				},
				paymentMethod: 'wechat',
				details: [
					{ label: '缴费项目', value: '2024年1月物业费' },
					{ label: '房屋地址', value: '2栋1单元1202室' },
					{ label: '缴费周期', value: '2023.12.01-2023.12.31' },
					{ label: '滞纳金', value: '￥0.00' }
				]
			}
		},
		methods: {
			selectPayment(method) {
				this.paymentMethod = method;
			},
			async handlePayment() {
				uni.showLoading({ title: '支付中...' });
				try {
					const res = await request({
						url: 'owner-server/owner/alipay/confirm',
						method: 'POST',
						data: {
							subject: this.details[0].value,
							total: this.total
						}
					})
					if (res.code === 200) {
                        const encodedHtml = encodeURIComponent(res.data);
                        uni.redirectTo({ 
                            url: `/pages/pay/pay?url=${encodedHtml}`
                        });
                    } else {
						uni.showToast({ title: res.msg });
					}
				} catch (error) {
					uni.showToast({ title: '支付失败' });
				} finally {
					uni.hideLoading();
				}
			}
		}
	}
</script>

<style>
	.order-container {
		background: #f6f8fa;
		min-height: 100vh;
		padding: 24rpx;
	}

	.status-card {
		background: #fff;
		border-radius: 18rpx;
		padding: 48rpx 0;
		text-align: center;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(74,144,226,0.05);
	}

	.status-text {
		font-size: 32rpx;
		color: #333;
		margin: 20rpx 0;
	}

	.amount {
		font-size: 56rpx;
		color: #e64340;
		font-weight: bold;
	}

	.detail-card,
	.payment-card {
		background: #fff;
		border-radius: 18rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(74,144,226,0.05);
	}

	.section-title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 24rpx;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.item-label {
		color: #666;
		font-size: 28rpx;
	}

	.item-value {
		color: #333;
		font-size: 28rpx;
	}

	.payment-method {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.method-icon {
		width: 48rpx;
		height: 48rpx;
		margin-left: 10rpx;
		margin-right: 8rpx;
	}

	.method-name {
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.pay-button {
		background: #4A90E2;
		color: #fff;
		border-radius: 44rpx;
		margin-top: 48rpx;
		height: 88rpx;
		line-height: 88rpx;
	}
</style>
